<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设置页面字符编码为UTF-8，确保页面能够正确显示各种字符，避免出现乱码情况，这是HTML页面的基本配置 -->
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!-- 引入基础样式文件，该文件通常包含了一些通用的样式规则，例如全局的字体设置、内外边距重置、颜色默认值等，用于统一整个网站页面的基础外观风格 -->
    <link rel="stylesheet" href="../css/base.css">
    <!-- 引入表单相关样式文件，用于专门为页面中的表单元素（如输入框、按钮、提示信息等）设置特定的样式，使其呈现出符合设计要求的外观和布局 -->
    <link rel="stylesheet" href="../css/form.css">
</head>

<body>
    <!-- 页面头部容器，使用了自定义的类名 "header" 和 "container"，"header" 可能用于标识这是页面的头部区域，"container" 通常意味着该元素会在页面中水平居中显示，这里展示了登录页面的标题文字 -->
    <div class="header container">登录页面</div>
    <form>
        <!-- 用于显示用户名或密码错误的提示信息，通过添加 "error" 类名，可以方便后续在 CSS 文件中对错误提示信息的样式进行统一设置，比如设置文字颜色为红色等，使其更加醒目，引起用户注意 -->
        <span class="error">用户名或密码错误！</span>
        <label>
            <!-- 用户名输入框的标签及对应的输入框元素，"username" 类名可用于在 CSS 中为该输入框设置特定样式，如宽度、高度、边框样式等，同时设置输入框的类型为 "text"，表示用户可以输入普通文本内容 -->
            用户名： <input type="text" class="username">
        </label>
        <label>
            <!-- 密码输入框的标签及对应的输入框元素，同样通过 "password" 类名方便设置样式，不过此处虽然设置类型为 "text"，实际开发中密码输入框一般应设置为 "password" 类型，这样用户输入的密码内容会以加密形式（如黑点或星号）显示，增强安全性，此处可能是示例代码有待完善 -->
            密&nbsp;&nbsp;&nbsp;码： <input type="text" class="password">
        </label>
        <p>
            <!-- 提供一个提示信息及链接，告知用户如果还没有账号，可以通过点击 "去注册" 链接跳转到注册页面（"./register.html"），方便新用户进行注册操作 -->
            还没账号，<a href="./register.html">去注册</a>
        </p>
        <button>登录</button>
    </form>
    <!-- 引入登录相关的JavaScript脚本文件，采用模块类型（type="module"），意味着该脚本文件内可能使用了 ES6 模块语法来组织代码，方便进行代码的模块化管理，在该脚本中通常会包含如表单验证、登录请求发送等与登录功能相关的逻辑代码 -->
    <script src="../js/login.js" type="module"></script>
</body>

</html>